<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<script type="text/javascript">
    // var baseurl ="http://r2204013e1.iok.la/static/img";
    var baseurl ="http://localhost/static/img";
    $(document).ready(function () {
        console.log(123456);
        var selectHtml = "";
        var hiddenIMGHtml = "";
        $.ajax({
            type: "POST",
            url: "../main/getIMGs",
            async: false,//true异步，false同步将会锁浏览器
            cache: true,//cache-默认true缓存
            dataType: 'json',
            success: function (data) {
                var list = data.versionList;
                var listSize = list == null ? 0 : list.length;
                for (var i = 0; i < listSize; i++) {
                    selectHtml += '<option value="' + list[i] + '">副本' + i + '</option>'
                    hiddenIMGHtml += '<img src=' + list[i] + '/>';
                }
                $("#versionList").html(selectHtml)

                if (listSize > 0) {
                    $("#versionList").val(list[listSize - 1])
                    $("#img").attr("src", list[listSize - 1]);

                }
                $("#hiddenIMG").html('<img src=' + list[i] + '/>');
            }
        });
    });
    uploadImgFile = function () {
        var selectHtml = "";
        var hiddenIMGHtml = "";
        var file = $("#file")[0].files[0];
        var formData = new FormData();
        formData.append("file", file);
        $.ajax({
            type: "POST",
            url: "../main/uploadImg",
            processData: false,
            contentType: false,
            data: formData,
            async: false,//true异步，false同步将会锁浏览器
            cache: true,//cache-默认true缓存
            dataType: 'json',
            success: function (data) {
                $("#img").attr("src", data.filePath);
                var list = data.versionList;
                var listSize = list == null ? 0 : list.length;
                for (var i = 0; i < listSize; i++) {
                    selectHtml += '<option value="' + list[i] + '">副本' + i + '</option>'
                    hiddenIMGHtml += '<img src=' + list[i] + '/>';
                }
                $("#versionList").html(selectHtml)
                $("#hiddenIMG").html(hiddenIMGHtml);
                if (listSize > 0) {
                    $("#versionList").val(list[listSize - 1])
                }
            }
        });
        console.log("###");
    };
    selectIMG = function () {
        var src = $("#versionList").val();
        $("#img").attr("src", src);
    };

    deleteIMG = function (type) {
        var selectHtml = "";
        var src = $("#versionList").val().replace(baseurl, "");
        $.ajax({
            type: "POST",
            url: "../main/deleteIMG",
            data: {
                "fileUri": src,
                "type":type
            },
            async: false,//true异步，false同步将会锁浏览器
            cache: true,//cache-默认true缓存
            dataType: 'json',
            success: function (data) {
                var list = data.versionList;
                var listSize = list == null ? 0 : list.length;
                for (var i = 0; i < listSize; i++) {
                    selectHtml += '<option value="' + list[i] + '">副本' + i + '</option>'
                }
                $("#versionList").html(selectHtml)
                if (listSize > 0) {
                    $("#versionList").val(list[listSize - 1])
                    $("#img").attr("src", list[listSize - 1]);
                } else {
                    $("#img").attr("src", "");
                }
            }
        })
    };

    downIMG = function () {
        var src = $("#versionList").val().replace(baseurl, "");
        var aTag = '<a id="downIMGA" href="../main/downIMG/?filePath=' + src + '" >导出</a>';
        $("#downIMG").html(aTag);
        $("#downIMGA")[0].click();
        $("#downIMG").html();
    };
    commonAjax = function (type, value, url) {
        var selectHtml = "";
        var src = $("#versionList").val().replace(baseurl, "");
        if (src == null) {
            return;
        }
        $.ajax({
            type: "POST",
            url: url,
            data: {
                "type": type,
                "val": value,
                "fileUri": src,
            },
            async: false,//true异步，false同步将会锁浏览器
            cache: true,//cache-默认true缓存
            dataType: 'json',
            success: function (data) {
                var list = data.versionList;
                var listSize = list == null ? 0 : list.length;
                for (var i = 0; i < listSize; i++) {
                    selectHtml += '<option value="' + list[i] + '">副本' + i + '</option>'
                }
                $("#versionList").html(selectHtml)
                if (listSize > 0) {
                    $("#versionList").val(list[listSize - 1])
                    $("#img").attr("src", list[listSize - 1]);
                } else {
                    $("#img").attr("src", "");
                }
            }
        })
    };
    changeColor = function (type) {
        var value = null;
        var url = "../main/changeColor";
        commonAjax(type, value, url);
    };

    binaryzation = function (type) {
        var value = $("#binaryzation" + type).val();
        $("#binaryzation"+type+"V").text(value);
        var url = "../main/binaryzation";
        commonAjax(type, value, url);
    };
    blurFilter = function (type) {
        var value = $("#blurFilter").val();
        $("#blurFilterV").text(value);
        var url = "../main/blurFilter";
        commonAjax(type, value, url);
    };
    varianceFilter = function (type) {
        var value = $("#varianceFilter").val();
        $("#varianceFilterV").text(value);
        var url = "../main/varianceFilter";
        commonAjax(type, value, url);
    };
    uSMFilter = function (type) {
        var value = $("#uSMFilter").val();
        $("#uSMFilterV").text(value);
        var url = "../main/uSMFilter";
        commonAjax(type, value, url);
    };
    pixelletFilter = function (type) {
        var value = $("#pixelletFilter").val();
        $("#pixelletFilterV").text(value);
        var url = "../main/pixelletFilter";
        commonAjax(type, value, url);
    };
    minMaxFilter = function (type) {
        var value = $("#minMaxFilter").val();
        $("#minMaxFilterV").text(value);
        var url = "../main/minMaxFilter";
        commonAjax(type, value, url);
    };
    meanMedimaFilter = function (type) {
        var value = $("#meanMedimaFilter").val();
        $("#meanMedimaFilterV").text(value);
        var url = "../main/meanMedimaFilter";
        commonAjax(type, value, url);
    };
    sAPNoiseFilter = function (type) {
        var value = $("#sAPNoiseFilter").val();
        $("#sAPNoiseFilterV").text(value);
        var url = "../main/sAPNoiseFilter";
        commonAjax(type, value, url);
    };
    gaussianNoiseFilter = function (type) {
        var value = $("#gaussianNoiseFilter").val();
        $("#gaussianNoiseFilterV").text(value);
        var url = "../main/gaussianNoiseFilter";
        commonAjax(type, value, url);
    };
    gaussianBlurFilter = function (type) {
        var value = $("#gaussianBlurFilter").val();
        $("#gaussianBlurFilterV").text(value);
        var url = "../main/gaussianBlurFilter";
        commonAjax(type, value, url);
    };
    lightFilter = function (type) {
        var value = $("#lightFilter").val();
        $("#lightFilterV").text(value);
        var url = "../main/lightFilter";
        commonAjax(type, value, url);
    };
    sobelFilter = function (type) {
        var value = null;
        var url = "../main/sobelFilter";
        commonAjax(type, value, url);
    };
    maerOperatorFilter = function (type) {
        var value = null;
        var url = "../main/maerOperatorFilter";
        commonAjax(type, value, url);
    };
    laplasFilter = function (type) {
        var value = null;
        var url = "../main/laplasFilter";
        commonAjax(type, value, url);
    };
    sharpFilter = function (type) {
        var value = null;
        var url = "../main/sharpFilter";
        commonAjax(type, value, url);
    };

</script>
<body>
<input type="button" value="上传" onclick="uploadImgFile();"/>
<input type="file" name="file" id="file" accept=".jpg,.jpeg,.png,.gif,.JPG"/>
<div></div>
选择副本:<select id="versionList" onchange="selectIMG()"></select>

<input type="button" value="删除当前副本" onclick="deleteIMG(0)"/>

<input type="button" value="下载当前副本" onclick="downIMG()"/>

<div>
    <input type="button" value="红" onclick="changeColor(0)"/>
    <input type="button" value="绿" onclick="changeColor(1)"/>
    <input type="button" value="蓝" onclick="changeColor(2)"/>
    <div></div>
    <!--    <input type="button" value="蓝" onclick="changeColor(2)">-->
    三色同值-三值化:<input id="binaryzation0" type="range" min="1" max="254" name="b0" step="5" onchange="binaryzation(0)"/><span id="binaryzation0V">127</span>,
    R-二值化:<input id="binaryzation1" type="range" min="1" max="254" step="5" name="b1" onchange="binaryzation(1)"/><span id="binaryzation1V">127</span>,
    G-二值化:<input id="binaryzation2" type="range" min="1" max="254" step="5" name="b2" onchange="binaryzation(2)"/><span id="binaryzation2V">127</span>,
    B-二值化:<input id="binaryzation3" type="range" min="1" max="254" step="5" name="b3" onchange="binaryzation(3)"/><span id="binaryzation3V">127</span>,
    RGB-二值化:<input id="binaryzation4" type="range" min="1" max="254" step="5" name="b4" onchange="binaryzation(4)"/><span id="binaryzation4V">127</span>,
    <!--    binaryzation-->

    <div></div>
<!--    条件亮度:<input id="lightFilter" type="range" min="1" max="100" value="10" step="5" name="b5" onchange="blurFilter(9999)"/><span id="lightFilterV">10</span>,-->
    模糊-滤镜:<input id="blurFilter" type="range" min="1" max="10" value="2" step="1" name="b5" onchange="blurFilter(9999)"/><span id="blurFilterV">2</span>,
    方差--滤镜:<input id="varianceFilter" type="range" min="1" max="10" value="2"  step="1" name="b6" onchange="varianceFilter(9999)"/><span id="varianceFilterV">2</span>,
<!--    高斯1-滤镜:<input id="uSMFilter" type="range" min="0" max="5" value="0.6"  step="0.3" name="b7" onchange="uSMFilter(9999)"/><span id="uSMFilterV">0.6</span>-->
    加噪-滤镜:<input id="sAPNoiseFilter" type="range" min="0.01" max="0.5" value="0.01"  step="0.01" name="b8" onchange="sAPNoiseFilter(9999)"/><span id="sAPNoiseFilterV">0.01</span>
    PixelletFilter-滤镜:<input id="pixelletFilter" type="range" min="1" max="30" value="1"  step="1" name="b9" onchange="pixelletFilter(9999)"/><span id="pixelletFilterV">1</span>
    <div></div>
    最大最小-滤镜:<input id="minMaxFilter" type="range" min="1" max="30" value="1"  step="1" name="b10" onchange="minMaxFilter(9999)"/><span id="minMaxFilterV">1</span>
    均值-滤镜:<input id="meanMedimaFilter" type="range" min="1" max="30" value="1"  step="1" name="b11" onchange="meanMedimaFilter(9999)"/><span id="meanMedimaFilterV">1</span>
    加噪2-滤镜:<input id="gaussianNoiseFilter" type="range" min="1" max="50" value="1"  step="1" name="b11" onchange="gaussianNoiseFilter(9999)"/><span id="gaussianNoiseFilterV">1</span>
    <div></div>
    <input type="button" value="索贝尔-滤镜" onclick="sobelFilter(9999)"/>
    <input type="button" value="锐化-滤镜" onclick="sharpFilter(9999)"/>
    <input type="button" value="maer-滤镜" onclick="maerOperatorFilter(9999)"/>
    <input type="button" value="laplas-滤镜" onclick="laplasFilter(9999)"/>
</div>
<div>
    <img id="img"/>
</div>
<input type="button" value="删除全部副本" onclick="deleteIMG(1)"/>
<div id="hiddenIMG" hidden>
    //缓存图片....
</div>
<div id="downIMG" hidden>
    //缓存图片....
</div>
</body>
</html>
